import {
  Button,
  Col,
  Drawer,
  Flex,
  Form,
  Input,
  InputNumber,
  Row,
  Typography
} from 'antd';
import type { CSSProperties } from 'react';

const initialValues = {
  gridTemplateRows: 3,
  gridTemplateColumns: 3,
  height: 450,
  gap: 12
};

const GirdConfig = ({
  open,
  onClose,
  onChangeStyle,
  onChangeLayout
}: {
  open?: boolean;
  onClose?: () => void;
  onChangeStyle?: (style: CSSProperties) => void;
  onChangeLayout?: (type: string, value: number) => void;
}) => {
  return (
    <div
      style={{
        // margin: 12,
        width: open ? '500px' : '0',
        transition: 'all 0.3s',
        overflow: 'hidden',
        boxSizing: 'border-box'
      }}
    >
      <Form
        labelCol={{ flex: '80px' }}
        style={{ padding: 12, boxSizing: 'border-box', position: 'relative' }}
        initialValues={initialValues}
        onValuesChange={(value) => {
          if ('gridTemplateRows' in value) {
            onChangeStyle?.({
              gridTemplateRows: `repeat(${value.gridTemplateRows}, calc(100% / 3))`
            });
            onChangeLayout?.('gridTemplateRows', value.gridTemplateRows);
            return;
          }
          if ('gridTemplateColumns' in value) {
            onChangeStyle?.({
              gridTemplateColumns: `repeat(${value.gridTemplateColumns}, 1fr)`
            });
            onChangeLayout?.('gridTemplateColumns', value.gridTemplateColumns);
            return;
          }
          onChangeStyle?.(value);
        }}
      >
        <Flex
          justify="space-between"
          align="center"
          style={{
            paddingBlock: '12px',
            position: 'sticky',
            top: 12,
            backgroundColor: '#fff'
          }}
        >
          <Typography.Title level={5} style={{ margin: 0 }}>
            布局设置
          </Typography.Title>
          <Button type="primary" onClick={onClose}>
            退出
          </Button>
        </Flex>

        <Row>
          <Col span={12}>
            <Form.Item name="gridTemplateRows" label="行数">
              <InputNumber min={1} style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="gridTemplateColumns" label="列数">
              <InputNumber min={1} style={{ width: '100%' }} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="gap" label="间距">
              <InputNumber min={0} style={{ width: '100%' }} addonAfter="px" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default GirdConfig;
